<template>
	<view>
		<view class="sj">
			<view class="flex1 flex-middle">
				<view class="img">
					<image style="width: 128rpx;height: 128rpx;" src="../../static/siji.png" mode=""></image>
				</view>
				<view class="ml-40">
					<view class="mb-10">
						155****5555
					</view>
					<view class="flex_l">
						<u-rate :count="5" v-model="score" active-color="#FDD800" inactive-color="#999"
							:disabled="true"></u-rate>
						<view class="size-26 ml-20" style="color:#FDD800;">5分</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tu">
			<view class="img">
				<image src="../../static/yuan.png" mode=""></image>
			</view>
			<view class="text">订单已完成</view>
			<view class="number">￥15.00</view>
		</view>
		
		<view class="title_box">
			<view style="height: 50rpx;width: 100%;"></view>
			<view class="xing">
				<text>评价星级</text>
				<u-rate :count="5" v-model="score" active-color="#FDD800" inactive-color="#999"
					:disabled="true"></u-rate>
			</view>
			
			<view class="title">评价内容</view>
			<view class="area">
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
			</view>
		</view>
		
		<view style="height: 50rpx;width: 100%;"></view>
		<view class=" mlr-36">
			<u-button type="primary" shape="square" :ripple="true" @click="">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 5
			}
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F7FB;
	}
	.sj {
		width: 80%;
		margin: auto;
	}
	.tu {
		.img {
			width: 125rpx;
			height: 125rpx;
			margin: auto;
			margin-top: 40rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		.text {
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-top: 35rpx;
		}
		.number {
			font-size: 50rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-top: 30rpx;
		}
	}
	.title_box {
		width: 95%;
		margin: auto;
		margin-top: 45rpx;
		height: 520rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		
		.xing {
			padding: 0 28rpx;
		}
		
		.title {
			margin-top: 40rpx;
			padding: 0 28rpx;
		}
		.area {
			width: 95%;
			margin: auto;
			margin-top: 25rpx;
			border: 1rpx solid #E5E5E5;
			border-radius: 20rpx;
			padding: 21rpx;
		}
	}
</style>
